<template>
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-6">我的收藏</h1>
    
    <div v-if="favorites.length > 0" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
      <div v-for="game in favorites" :key="game.id" class="bg-white rounded-lg shadow-md overflow-hidden transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
        <img :src="`http://localhost:3000/images/games/${game.image}`" alt="游戏封面" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-lg mb-2">{{ game.title }}</h3>
          <div class="flex items-center text-sm text-gray-500 mb-2">
            <span class="mr-3"><i class="fa fa-calendar mr-1"></i>{{ game.release_date }}</span>
            <span><i class="fa fa-gamepad mr-1"></i>{{ game.genre }}</span>
          </div>
          <p class="text-gray-600 text-sm mb-4 line-clamp-2">{{ game.description }}</p>
          <div class="flex justify-between items-center">
            <router-link :to="`/games/${game.id}`" class="text-blue-600 hover:text-blue-800 font-medium">查看详情</router-link>
            <button @click="toggleFavorite(game.id)" class="text-red-500 hover:text-red-700 transition-colors">
              <i class="fa fa-heart fas"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <div v-else class="text-center py-16">
      <i class="fa fa-heart-o text-5xl text-gray-300 mb-4"></i>
      <p class="text-gray-500">你还没有收藏任何游戏</p>
      <router-link to="/" class="mt-4 inline-block bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md transition-colors">
        浏览游戏
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      favorites: []
    };
  },
  mounted() {
    this.fetchFavorites();
  },
  methods: {
    async fetchFavorites() {
      try {
        const response = await this.axios.get('/users/me/favorites');
        this.favorites = response.data;
      } catch (error) {
        console.error(error);
        alert('获取收藏列表失败');
        if (!this.isAuthenticated()) {
          this.$router.push({ name: 'Login' });
        }
      }
    },
    async toggleFavorite(gameId) {
      try {
        await this.axios.delete(`/games/${gameId}/favorite`);
        this.favorites = this.favorites.filter(game => game.id !== gameId);
      } catch (error) {
        console.error(error);
        alert('取消收藏失败');
      }
    },
    isAuthenticated() {
      return localStorage.getItem('token');
    }
  }
};
// 组员写代码啦-廉鹏宇
</script>  